<template>
    <uni-drawer ref="drawer" mode="left" :width="280">
        <!-- 头部个人信息 -->
        <view class="header">
            <image class="avatar" src="/src/static/avater.png" mode="aspectFill" />
            <text class="name">{{ userInfo.nickName }}</text>
            <!-- <text class="sign">{{ userInfo.signature || '暂无签名' }}</text> -->
        </view>

        <!-- 功能宫格 -->
        <view class="grid">
            <view class="grid-item" @click="onItem('history')">
                <uni-icons type="list" color="#667eea" size="20" style="padding-right:20rpx"/>
                <text class="grid-txt">观看历史</text>
            </view>
            <view class="grid-item" @click="onItem('offline')">
                <uni-icons type="download" color="#667eea" size="20" style="padding-right:20rpx"/>
                <text class="grid-txt">离线缓存</text>
            </view>
            <view v-if="uni.getStorageSync('phone') == 'admin'" class="grid-item" @click="onItem('setting')">
                <uni-icons type="person-filled" color="#667eea" size="20" style="padding-right:20rpx"/>
                <text class="grid-txt">用户管理</text>
            </view>
            <view class="grid-item exit" @click="onItem('logout')">
                <uni-icons type="upload-filled" color="red" size="20" style="padding-right:20rpx"/>
                <text class="grid-txt">退出登录</text>
            </view>
        </view>
    </uni-drawer>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { removeToken } from '../../utils/auth'

// 父组件可传用户信息
const props = defineProps({
    userInfo: {
        type: Object,
        default: () => ({
            avatar: 'https://img.cdn.aliyun.dcloud.net.cn/uni-app/doc/uni@2x.png',
            nickName: uni.getStorageSync('name') || '游客',
            signature: ''
        })
    }
})

const emit = defineEmits(['item'])

const drawer = ref(null)

// 打开抽屉
const open = () => drawer.value.open()
// 关闭抽屉
const close = () => drawer.value.close()

// 点击项抛给父组件
const onItem = (type) => {
    emit('item', type)
    close();// 先关闭抽屉
    if (type == 'history' || type == 'offline'){
        uni.showToast({
            title: '功能暂未开放',
            icon: 'close'
        })
        return
    }
    if (type == 'setting'){
       uni.navigateTo({
            url: '/pages/user/index'
        })
        return
    }
    if (type == 'logout'){
        uni.showModal({
            title: '提示',
            content: '确定退出登录吗？',
            success: (res) => {
                if (res.confirm) {
                    removeToken()
                    uni.removeStorageSync('phone')
                    uni.removeStorageSync('name')
                    uni.showToast({
                        title: '退出登录成功',
                        icon: 'success'
                    })
                    uni.reLaunch({
                        url: '/pages/login/login'
                    })
                }
            }
        })
    }  
}

defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0;
    background: linear-gradient(to right, #667eea, #764ba2);
    color: #fff;

    .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        border: 4rpx solid #fff;
    }

    .name {
        margin-top: 16rpx;
        font-size: 32rpx;
        font-weight: 600;
    }

    .sign {
        margin-top: 8rpx;
        font-size: 24rpx;
        opacity: 0.8;
    }
}

.grid {
    display: flex;
    flex-direction: column;
    padding: 20rpx;

    .grid-item {
        width: 100%;
        padding: 30rpx 0;
        text-align: center;
        border-bottom: 1rpx solid #f5f5f5;

        &:active {
            background: #f5f5f5;
        }

        &.exit {
            color: #e64340;
        }
    }

    .grid-txt {
        font-size: 28rpx;
    }
}
</style>